<template>
	<view>
		<view style="">
			<view class="" style="background-color: #0e6dfc; height: 400rpx;">
				<view class="text-xxl text-white " style="text-align: center;padding-top: 30px;">网络信息上报</view>
			</view>

			<view class="bg-white padding-lg" style="border-radius: 50rpx 50rpx 0 0; margin-top: -50px;">
				<view class="text-xl">欢迎登录</view>

				<view class="login-form-content margin-top-xl margin-lr-auto padding-top-lg">
					<view class="input-item flex-row padding-sm">
						<uni-icons type="person" size="26" class="icon margin-right-sm" color="#0e6dfc"></uni-icons>
						<input v-model="loginForm.phone" class="input" type="text" placeholder="请输入您的手机号"
							maxlength="30" />
					</view>
					<view class="input-item flex-row padding-sm">
						<uni-icons type="locked" size="26" class="icon margin-right-sm" color="#0e6dfc"></uni-icons>

						<!-- 验证码登录 -->
						<view class="flex-row-bt" style="width: 100%;">
							<input v-model="loginForm.code" type="number" class="input" placeholder="请输入您的验证码"
								maxlength="6" />
							<view class="themeColor text-sm" @tap.stop="getCode">{{tips}}</view>
						</view>
					</view>
					<view class="margin-top-sm flex-row-bt">
					</view>
					<view class="margin-top-sm">
						<button hover-class="none" class="login-btn theme-bg-color text-white" style=""
							@click="code_validate">登录</button>
						<!-- <button class="login-btn themeBgColor text-white margin-top-sm"
							style="background-color: #47c690;" hover-class="none">微信登录</button> -->
					</view>

					<view class="flex-row margin-top-sm text-sm">
						<uni-icons type="circle-filled" size="20" class="icon" style="line-height: 17px;"
							color="#0e6dfc" v-if="xieyi.agree" @click="xieyi.agree = !xieyi.agree"></uni-icons>
						<uni-icons type="circle" size="20" class="icon" style="line-height: 17px;" color="#aaa"
							v-if="!xieyi.agree" @click="xieyi.agree = !xieyi.agree"></uni-icons>
						<text class="text-grey1">已阅读并同意</text>
						<text class="themeColor" @click="open_xieyi">《用户协议》</text>
						<text class="themeColor" @click="open_xieyi">《隐私协议》</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 服务协议弹窗 -->
		<uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="bottom" class="">
			<view class="bg-white padding-sm" style="height: 250px;border-radius: 15px 15px 0 0">
				<uni-icons type="closeempty" size="20" style="float: right;" color="#aaa"
					@click="close_xieyi"></uni-icons>
				<view style="text-align: center; margin-top: 25px;" class="text-bold text-df">服务协议及隐私保护</view>
				<view class="margin-top-sm ">
					<text class="text-secondary-xl" style="">为了更好保障您的合法权益，请您阅读并同意</text>
					<text class="text-black text-df">《用户协议》《隐私协议》</text>
					<text class="text-secondary-xl">。</text>
				</view>
				<button class="agree-btn theme-bg-color text-white margin-top-xl" style=""
					@click="agree_xieyi">同意并继续</button>
			</view>
		</uni-popup>

		<!-- 验证码倒计时 -->
		<tn-verification-code ref="code" uniqueKey="login-demo-4" :seconds="60" @change="codeChange">
		</tn-verification-code>
	</view>
</template>

<script>
	import {
		loginSendSms,
		login
	} from '../api/login';
	// import store from '../../store/login';
	import {
		setToken
	} from '@/utils/auth'
	export default {
		data() {
			return {
				loginForm: {
					phone: '',
					code: ''
				},
				// 倒计时提示文字
				tips: '获取验证码',

				//协议
				xieyi: {
					//弹出层
					pop: false,
					//用户协议
					agree: false
				},

			}
		},
		onLoad(){
			if(uni.getStorageSync('code')){
				uni.switchTab({
					url: '/pages/index'
				})
			}
		},
		methods: {
			// 获取验证码倒计时被修改
			codeChange(event) {
				this.tips = event
			},
			// 获取验证码
			getCode() {
				if (this.$refs.code.canGetCode) {
					if (this.loginForm.phone.length != 11) {
						uni.showModal({
							title: '登录提示',
							content: '请填写正确的手机号',
						});
					} else {
						// this.$t.messageUtils.loading('正在获取验证码')
						loginSendSms({
							phone: this.loginForm.phone
						}).then(res => {
							console.log(res)
							if (res.code == 200) {
								uni.showLoading({
									title: '验证码发送成功！'
								});
								setTimeout(() => {
									uni.hideLoading();
									// 通知组件开始计时
									this.$refs.code.start()
								}, 1000)
							} else {
								uni.showModal({
									title: '登录提示',
									content: res.message,
								});
							}
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: this.$refs.code.secNum + '秒后再重试',
						duration: 2000
					});

				}
			},
			//打开弹出层
			open_xieyi() {
				this.$refs.popup.open()
			},
			//关闭弹出层
			close_xieyi() {
				this.$refs.popup.close()
			},
			//同意协议
			agree_xieyi() {
				this.close_xieyi()
				this.xieyi.agree = true
			},
			//验证码验证
			code_validate() {
				if (this.xieyi.agree) {
					if (this.loginForm.phone == '') {
						uni.showToast({
							title: '请输入您的手机号',
							icon: 'none'
						});
					} else if (this.loginForm.code == '') {
						uni.showToast({
							title: '请输入您的验证码',
							icon: 'none'
						});
					} else {
						console.log('1')
						login(this.loginForm).then((res) => {
							console.log(JSON.stringify(res))
							// {"success":true,"code":200,"message":"success","data":{"id":null,"phone":"18296898672","name":"群众","address":"","authority":"0","openId":null,"addressList":[]}}
							if (res.code == 200) {
					            setToken(res.data.token)
								uni.setStorageSync('token', res.data.token)
								uni.setStorageSync('code', res.data.loginResult.authority)
								uni.setStorageSync('isLogin', true)
								uni.setStorageSync('userInfo', res.data.loginResult)
								uni.setStorageSync('addressList', res.data.loginResult.addressList)
								uni.setStorageSync('phone', res.data.loginResult.phone)
								uni.setStorageSync('address', res.data.loginResult.address)
								console.log('跳转')
								uni.switchTab({
									url: '/pages/index'
								})
							} else {
								uni.showToast({
									title: '登录失败',
									icon: 'none'
								});
							}
						})
					}
				} else {
					this.open_xieyi()
				}
			},


			// 跳转首页
			to_index() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #0e6dfc;
		background-color: #fff;
	}

	.login-form-content {
		text-align: center;
	}

	.input-item {
		margin: 20px auto;
		width: 100%;
		background-color: #f5f7fb;
		height: 50px;
		border-radius: 15rpx;
		align-items: center;
	}

	.icon {
		font-size: 38rpx;
		margin-left: 10px;
		color: #999;
	}

	.input {
		// font-weight: bold;
		// width: 100%;
		font-size: 14px;
		line-height: 45px;
		text-align: left;
	}

	.login-btn {
		height: 50px;
		font-size: 14px;
		line-height: 50px;
		border-radius: 16px;
	}

	.agree-btn {
		height: 40px;
		font-size: 14px;
		line-height: 40px;
		border-radius: 16px;
	}
</style>